<div class="player-wrapper paused" id="playerWrapper">
  <!-- Logo -->
  <div class="logo">
    <img
      src="https://proelement.ir/wp-content/uploads/2023/11/proelement.svg"
      alt="logo"
    />
  </div>

  <!-- Controls Overlay -->
  <div class="controls-overlay">
    <!-- Progress -->
    <div class="progress-area" id="progressArea">
      <div class="progress-bg"></div>
      <div class="progress-buffer" id="bufferBar"></div>
      <div class="progress-fill" id="progressFill"></div>
      <div class="progress-thumb" id="progressThumb"></div>
    </div>

    <!-- Controls Row -->
    <div class="controls-row">
      <!-- Rewind -->
      <button class="ctrl-btn" id="rewindBtn" data-tip="15 ثانیه عقب">
        <svg
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
        >
          <path
            d="M19 7.83003C18.2078 6.85825 17.2212 6.06273 16.1036 5.49445C14.986 4.92618 13.762 4.59768 12.51 4.53003V2.53003C12.51 2.34432 12.4583 2.16227 12.3607 2.0043C12.263 1.84632 12.1233 1.71866 11.9572 1.6356C11.7911 1.55255 11.6052 1.51739 11.4202 1.53407C11.2352 1.55075 11.0586 1.6186 10.91 1.73003L6.91 4.73003C6.7858 4.82318 6.685 4.94396 6.61557 5.08282C6.54615 5.22167 6.51 5.37478 6.51 5.53003C6.51 5.68528 6.54615 5.83839 6.61557 5.97724C6.685 6.1161 6.7858 6.23688 6.91 6.33003L10.91 9.33003C11.0586 9.44146 11.2352 9.50931 11.4202 9.52599C11.6052 9.54267 11.7911 9.50751 11.9572 9.42446C12.1233 9.3414 12.263 9.21374 12.3607 9.05576C12.4583 8.89778 12.51 8.71574 12.51 8.53003V6.53003C13.463 6.59773 14.392 6.85979 15.2398 7.30006C16.0877 7.74032 16.8364 8.34948 17.44 9.09003C18.0978 9.90922 18.5648 10.8647 18.807 11.887C19.0491 12.9094 19.0604 13.9728 18.84 15C18.5517 16.3012 17.8979 17.4931 16.9555 18.4355C16.0131 19.3779 14.8212 20.0317 13.52 20.32C12.4897 20.5421 11.4228 20.5317 10.3969 20.2895C9.37113 20.0473 8.41222 19.5795 7.59 18.92C6.7831 18.2655 6.13204 17.4395 5.68406 16.502C5.23607 15.5645 5.0024 14.539 5 13.5C5 13.2348 4.89464 12.9805 4.70711 12.7929C4.51957 12.6054 4.26522 12.5 4 12.5C3.73478 12.5 3.48043 12.6054 3.29289 12.7929C3.10536 12.9805 3 13.2348 3 13.5C3 15.887 3.94821 18.1762 5.63604 19.864C7.32387 21.5518 9.61305 22.5 12 22.5C12.6417 22.4973 13.2816 22.4303 13.91 22.3C15.414 21.9757 16.8096 21.2712 17.9638 20.2538C19.1179 19.2364 19.992 17.9402 20.5026 16.4888C21.0131 15.0374 21.143 13.4794 20.88 11.9636C20.6169 10.4477 19.9697 9.02453 19 7.83003ZM8.25 17.75C8.44891 17.75 8.63968 17.671 8.78033 17.5304C8.92098 17.3897 9 17.1989 9 17V11.5C9 11.3011 8.92098 11.1104 8.78033 10.9697C8.63968 10.829 8.44891 10.75 8.25 10.75C8.05109 10.75 7.86032 10.829 7.71967 10.9697C7.57902 11.1104 7.5 11.3011 7.5 11.5V17C7.5 17.1989 7.57902 17.3897 7.71967 17.5304C7.86032 17.671 8.05109 17.75 8.25 17.75ZM14.5 17.75C14.0442 17.7468 13.6032 17.5881 13.25 17.3C12.8968 17.5881 12.4558 17.7468 12 17.75C11.4696 17.75 10.9609 17.5393 10.5858 17.1642C10.2107 16.7892 10 16.2805 10 15.75V14C10 13.1381 10.3424 12.3114 10.9519 11.7019C11.5614 11.0924 12.388 10.75 13.25 10.75C14.112 10.75 14.9386 11.0924 15.5481 11.7019C16.1576 12.3114 16.5 13.1381 16.5 14V15.75C16.5 16.2805 16.2893 16.7892 15.9142 17.1642C15.5391 17.5393 15.0304 17.75 14.5 17.75ZM11.5 14V15.75C11.5 15.8826 11.5527 16.0098 11.6464 16.1036C11.7402 16.1974 11.8674 16.25 12 16.25C12.1326 16.25 12.2598 16.1974 12.3536 16.1036C12.4473 16.0098 12.5 15.8826 12.5 15.75V15.25C12.5 15.0511 12.579 14.8604 12.7197 14.7197C12.8603 14.579 13.0511 14.5 13.25 14.5C13.4489 14.5 13.6397 14.579 13.7803 14.7197C13.921 14.8604 14 15.0511 14 15.25V15.75C14 15.8826 14.0527 16.0098 14.1464 16.1036C14.2402 16.1974 14.3674 16.25 14.5 16.25C14.6326 16.25 14.7598 16.1974 14.8536 16.1036C14.9473 16.0098 15 15.8826 15 15.75V14C15 13.5359 14.8156 13.0908 14.4874 12.7626C14.1592 12.4344 13.7141 12.25 13.25 12.25C12.7859 12.25 12.3408 12.4344 12.0126 12.7626C11.6844 13.0908 11.5 13.5359 11.5 14Z"
            fill="#FFFFFF"
          ></path>
        </svg>
      </button>

      <!-- Play/Pause -->
      <button class="ctrl-btn btn-play" id="playBtn" data-tip="پخش / توقف">
        <svg
          id="playIcon"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          class="rp-fill-white rp-w-6 rp-h-6 rp-transition-all"
          width="24"
          height="24"
        >
          <path
            d="M7.09 20C6.86478 20.0114 6.64055 19.9631 6.44 19.86C5.12 19.08 5 13.58 5 11.92C5 9.83 5.14 4.92 6.43 4.16C7.73 3.4 12.05 5.74 13.85 6.78C15.3 7.61 20 10.43 20 12C20 13.57 15.76 16.12 13.93 17.17C12.34 18.08 8.82 20 7.09 20Z"
            fill="#FFFFFF"
          ></path>
        </svg>
      </button>

      <!-- Forward -->
      <button class="ctrl-btn" id="forwardBtn" data-tip="15 ثانیه جلو">
        <svg
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
        >
          <path
            d="M20 12.5C19.7348 12.5 19.4804 12.6054 19.2929 12.7929C19.1053 12.9805 19 13.2348 19 13.5C19.0006 14.5424 18.7683 15.5718 18.3202 16.5129C17.8721 17.4541 17.2195 18.2833 16.41 18.94C15.5878 19.5995 14.6289 20.0673 13.603 20.3095C12.5772 20.5517 11.5103 20.5621 10.48 20.34C9.17618 20.0502 7.9825 19.3935 7.03984 18.4473C6.09718 17.5011 5.4449 16.3049 5.15999 15C4.94094 13.9721 4.95383 12.9082 5.19775 11.8858C5.44166 10.8635 5.91044 9.90838 6.56999 9.09003C7.17355 8.34948 7.92232 7.74032 8.77017 7.30006C9.61803 6.85979 10.547 6.59773 11.5 6.53003V8.53003C11.5 8.71574 11.5517 8.89778 11.6493 9.05576C11.747 9.21374 11.8867 9.3414 12.0528 9.42446C12.2189 9.50751 12.4048 9.54267 12.5898 9.52599C12.7748 9.50931 12.9514 9.44146 13.1 9.33003L17.1 6.33003C17.2242 6.23688 17.325 6.1161 17.3944 5.97724C17.4638 5.83839 17.5 5.68528 17.5 5.53003C17.5 5.37478 17.4638 5.22167 17.3944 5.08282C17.325 4.94396 17.2242 4.82318 17.1 4.73003L13.1 1.73003C12.9514 1.6186 12.7748 1.55075 12.5898 1.53407C12.4048 1.51739 12.2189 1.55255 12.0528 1.6356C11.8867 1.71866 11.747 1.84632 11.6493 2.0043C11.5517 2.16227 11.5 2.34432 11.5 2.53003V4.53003C9.3321 4.65651 7.28304 5.56256 5.73068 7.0811C4.17833 8.59964 3.22737 10.6282 3.05318 12.7928C2.87899 14.9574 3.49332 17.112 4.78287 18.8592C6.07241 20.6065 7.95022 21.8285 10.07 22.3C10.6984 22.4303 11.3382 22.4973 11.98 22.5C14.3669 22.5 16.6561 21.5518 18.344 19.864C20.0318 18.1762 20.98 15.887 20.98 13.5C20.98 13.2382 20.8774 12.9869 20.6942 12.7999C20.511 12.6129 20.2617 12.5053 20 12.5ZM7.49998 11.5V17C7.49998 17.1989 7.579 17.3897 7.71965 17.5304C7.86031 17.671 8.05107 17.75 8.24998 17.75C8.4489 17.75 8.63966 17.671 8.78031 17.5304C8.92097 17.3897 8.99998 17.1989 8.99998 17V11.5C8.99998 11.3011 8.92097 11.1104 8.78031 10.9697C8.63966 10.829 8.4489 10.75 8.24998 10.75C8.05107 10.75 7.86031 10.829 7.71965 10.9697C7.579 11.1104 7.49998 11.3011 7.49998 11.5ZM9.99998 15.75V14C9.99998 13.1381 10.3424 12.3114 10.9519 11.7019C11.5614 11.0924 12.388 10.75 13.25 10.75C14.1119 10.75 14.9386 11.0924 15.5481 11.7019C16.1576 12.3114 16.5 13.1381 16.5 14V15.75C16.5 16.2805 16.2893 16.7892 15.9142 17.1642C15.5391 17.5393 15.0304 17.75 14.5 17.75C14.0442 17.7468 13.6032 17.5881 13.25 17.3C12.8968 17.5881 12.4558 17.7468 12 17.75C11.4696 17.75 10.9608 17.5393 10.5858 17.1642C10.2107 16.7892 9.99998 16.2805 9.99998 15.75ZM15 15.75V14C15 13.5359 14.8156 13.0908 14.4874 12.7626C14.1592 12.4344 13.7141 12.25 13.25 12.25C12.7859 12.25 12.3407 12.4344 12.0125 12.7626C11.6844 13.0908 11.5 13.5359 11.5 14V15.75C11.5 15.8826 11.5527 16.0098 11.6464 16.1036C11.7402 16.1974 11.8674 16.25 12 16.25C12.1326 16.25 12.2598 16.1974 12.3535 16.1036C12.4473 16.0098 12.5 15.8826 12.5 15.75V15.25C12.5 15.0511 12.579 14.8604 12.7197 14.7197C12.8603 14.579 13.0511 14.5 13.25 14.5C13.4489 14.5 13.6397 14.579 13.7803 14.7197C13.921 14.8604 14 15.0511 14 15.25V15.75C14 15.8826 14.0527 16.0098 14.1464 16.1036C14.2402 16.1974 14.3674 16.25 14.5 16.25C14.6326 16.25 14.7598 16.1974 14.8535 16.1036C14.9473 16.0098 15 15.8826 15 15.75Z"
            fill="#FFFFFF"
          ></path>
        </svg>
      </button>

      <!-- Volume -->
      <div class="volume-area">
        <button class="ctrl-btn" id="muteBtn" data-tip="صدا">
          <svg
            id="volIcon"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
            <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
            <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
          </svg>
        </button>

        <div class="volume-slider-wrap">
          <input
            type="range"
            class="volume-slider"
            id="volumeSlider"
            min="0"
            max="1"
            step="0.01"
            value="1"
          />
        </div>
      </div>

      <!-- Time -->
      <div class="time-display">
        <span id="currentTime">۰:۰۰</span>
        <span>/</span>
        <span id="duration">۰:۰۰</span>
      </div>

      <div class="spacer"></div>

      <!-- Speed -->
      <div class="speed-wrap" id="speedWrap">
        <button class="speed-btn" id="speedBtn">1×</button>
        <div class="speed-menu" id="speedMenu">
          <button data-speed="0.5">0.5×</button>
          <button data-speed="0.75">0.75×</button>
          <button data-speed="1" class="active">1×</button>
          <button data-speed="1.25">1.25×</button>
          <button data-speed="1.5">1.5×</button>
          <button data-speed="2">2×</button>
        </div>
      </div>

      <!-- Fullscreen -->
      <button class="ctrl-btn" id="fsBtn" data-tip="تمام صفحه">
        <svg
          id="fsIcon"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <polyline points="15 3 21 3 21 9" />
          <polyline points="9 21 3 21 3 15" />
          <line x1="21" y1="3" x2="14" y2="10" />
          <line x1="3" y1="21" x2="10" y2="14" />
        </svg>
      </button>
    </div>
  </div>
</div>
